<template>
  <TestLayout>
    <template v-slot:main-left>
      <Institution />
    </template>
    <template v-slot:main-button>
      <mainButton
        :main-button="mainButton"
        @toMainSearch="search"
        @toMainSearchReset="reset"
      />
    </template>
    <template v-slot:search-info>
      <searchMain
        ref="searchMain"
        size="mini"
        :label-width="labelWidth"
        :model="formData"
        :rules="searchRules"
        :item-list="formItemList"
        @callbackComponent="callbackComponent"
      />
      <el-divider />
    </template>
    <template v-slot:main>
      <drawer-layout>
        <template v-slot:table-left>
          <common-table
            :data="infoList"
            border
            :columns-item="columns"
            :title="infoTitle"
            :loading="false"
            :item-list="itemList"
            :display-column="displayColumn"
            @checkbox-change="selectChangeEvent"
          />
        </template>
        <template v-slot:table-right>
          <common-table
            :data="testList"
            border
            :columns-item="testColumns"
            :title="testTitle"
            @checkbox-change="selectChangeEvent"
          />
        </template>
      </drawer-layout>
    </template>
  </TestLayout>
</template>

<script>
import TestLayout from "@/components/Layout/test.vue"
import Institution from "@/components/Trees/Institution.vue"
import mainButton from "@/components/CommonButtons/MainButton.vue"
import searchMain from "@/components/CommonForm/index.vue"
import DrawerLayout from "@/components/DrawerLayout/index.vue"
import CommonTable from "@/components/CommonTable/index.vue"
// 加载模拟数据
import {
  infoList,
  testList,
  sexs,
  isRecord,
  dataProps
} from "@/simdata/healthData.js"
export default {
  components: {
    TestLayout,
    Institution,
    mainButton,
    searchMain,
    DrawerLayout,
    CommonTable
  },
  data() {
    return {
      // 配置常用按钮
      mainButton: [
        {
          label: "新增",
          icon: "el-icon-circle-plus-outline",
          type: "primary",
          handle: () => {}
        },
        {
          label: "入户",
          icon: "el-icon-edit-outline",
          type: "success",
          handle: () => {
            console.log("点击入户了")
          }
        },
        {
          label: "档案迁移",
          icon: "el-icon-postcard",
          type: "warning",
          handle: () => {}
        }
      ],
      // label的宽度
      labelWidth: "auto",
      // 查询表单字段
      formData: {
        Address_value: [], // 常用地址
        keyword: "", // 个人信息项 字段
        keyValue: "", // 值
        createDate: null, // 建档日期 开始
        endDate: null, // 结束日期
        ageStart: "",
        endStart: "",
        isRecord: null // 是否建档
      },
      // 验证字段
      searchRules: {},
      // 配置查询 label表单
      formItemList: [
        {
          type: "myInformation",
          label: "个人信息查询项目",
          span: 14,
          options: [
            { label: "个人档案号", value: 1 },
            { label: "家庭档案号", value: 2 },
            { label: "姓名", value: 3 },
            { label: "身份证号", value: 4 }
          ]
        },
        {
          type: "TimeQueryTest",
          label: "建档日期",
          prop: "createDate",
          width: "80px",
          span: 4,
          placeholder: "请选择..."
        },
        {
          type: "Select",
          label: "是否建档",
          prop: "isRecord",
          width: "120px",
          span: 8,
          options: isRecord,
          props: dataProps,
          placeholder: "请选择..."
        },
        {
          type: "AgeQuery",
          label: "年龄段"
        }
      ],
      // 配置标题显示图标
      itemList: [
        {
          label: "高",
          color: "#66FFFF"
        },
        {
          label: "糖",
          color: "#f3daf9"
        },
        {
          label: "精",
          color: "#FFCC99"
        }
      ],
      // 所有列表数据
      infoTitle: "人员基本信息列表",
      testTitle: "中医药健康服务信息列表",
      infoList: infoList,
      testList: testList,
      // 配置显示的label标签
      columns: [
        { prop: "name", label: "姓名", width: "100" },
        {
          prop: "sex",
          label: "性别",
          width: "68",
          type: "sex",
          option: sexs
        },
        { prop: "age", label: "年龄", width: "80" },
        { prop: "birthdata", label: "出生日期", width: "100" },
        { prop: "identityNumber", label: "身份证号", width: "180" },
        { prop: "phonenumber", label: "本人电话号码", width: "150" },
        { prop: "linkName", label: "联系人姓名", width: "100" },
        { prop: "linkNumber", label: "联系人电话", width: "150" },
        { prop: "nowAddress", label: "现住地址", width: "150" },

        { prop: "number", label: "家庭档案号", width: "150" },
        { prop: "myNumber", label: "个人健康档案号", width: "150" },
        { prop: "serviceNum", label: "服务次数", width: "180" }
      ],
      // 控制表格操作按钮的显示隐藏
      displayColumn: {
        operationCol: true,
        editBtn: true,
        removeBtn: true
      },
      // test配置label标签
      testColumns: [
        { prop: "createDate", label: "填表日期", width: "100" },
        { prop: "responsibleDoctor", label: "医生", width: "150" }
      ]
    }
  },
  methods: {
    // 点击搜索按钮
    search() {},
    // 点击重置按钮
    reset() {},
    // 点击搜索按钮，请求数据
    callbackComponent() {
      console.log("调接口")
    },
    // 人员基本信息复选框勾选
    // 家庭基本信息复选框选中
    selectChangeEvent({ checked, records }) {}
  }
}
</script>
<style lang="scss" scoped></style>
